<template>
  <div>
        <el-dialog
                title="添加商品"
                :visible.sync="show"
                width="80%"
                center>
          <el-form ref="form" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="pname"></el-input>
            </el-form-item>
            <el-form-item label="商品规格">
              <el-input v-model="pspec"></el-input>
            </el-form-item>
            <el-form-item label="商品种类">
              <el-select v-model="options.name" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.tid"
                        :label="item.tname"
                        :value="item.tid">
                </el-option>
              </el-select>
              <el-popover
              placement="top"
              width="160"
              v-model="visible">
                <el-input v-model="input" placeholder="请输入要添加的商品种类"></el-input>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="newProduct">确定</el-button>
              </div>
              <el-button slot="reference">添加商品种类</el-button>
              </el-popover>
            </el-form-item>
          </el-form>
          <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="closeAdd">取消</el-button>
          <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="addProduct">添加</el-button>
        </el-dialog>
        <div>
          <div style="float:left">
            <span style="color: #409EFF">请输入要搜索的产品名称：</span>
            <el-input v-model="searchInput" style="width: 200px;margin-left: 20px;margin-right: 10px;"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchProduct">搜索</el-button>
          </div>
          <el-button type="primary" style="float: right;margin-left:18px" @click="openAddProduct()" >添加产品</el-button>
          <el-table
                  :data="tableData"
          >
            <el-table-column
                    prop="pid"
                    label="商品编号"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="商品名称"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="pspec"
                    label="商品规格"
                    width="400">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="DeleteProduct(scope.row)">删除商品</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageSize"
                  :current-page.sync="currentPage"
                  @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>

  </div>
</template>

<script>
import Navigation from "@/components/Navigation";
import HeaderMenu from "@/components/HeaderMenu";
export default {
  name: "Product",
  data(){
    return{
      searchInput:'',
      visible:false,
      input:'',
      ProductType:'',
      pspec:'',
      pid:'',
      tableData:[],
      currentPage:1,
      total:10,
      pageSize:3,
      nameStr:'',
      show:false,
      pname:'',
      options: [],
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      let supplierId = localStorage.supplierId
        this.$axios.get("api/getProductList/"+supplierId).then(
                r=>{
                  console.log(r.data)
                  this.tableData = r.data
                  this.total=r.data.total
                  this.pageSize=r.data.size
                }
        )
    },
    handleCurrentChange(){
      this.init();
    },
    // EditProduct(row){
    //   this.$axios.get("api/editProduct/"+row.pid).then(
    //           r=>{
    //             if (r.data == 200) {
    //               this.$message({
    //                 message: '修改成功',
    //                 type: 'success',
    //               });
    //               this.init();
    //             } else {
    //               this.$message({
    //                 message: '修改失败',
    //                 type: 'error'
    //               });
    //             }
    //           }
    //   )
    // },
    DeleteProduct(row){
      this.$axios.get("api/deleteProduct/"+row.pid).then(
              r=>{
                if (r.data == 200) {
                  this.$message({
                    message: '删除成功',
                    type: 'success',
                  });
                  this.init();
                } else {
                  this.$message({
                    message: '删除失败',
                    type: 'error'
                  });
                }
              }
      )
    },
    openAddProduct(){
      this.show = true;
      this.$axios.get("api/productTypeList").then(
              r=>{
                this.options = r.data
              }
      )
    },
    searchProduct(){
      this.$axios.get("api/searchProduct/"+this.searchInput).then(
              r=>{
                this.tableData = r.data
              }
      )
    },
    closeAdd(){
      this.show = false;
    },
    addProduct(){
      let supplierId = localStorage.supplierId
      this.$axios.get("api/addProduct/"+this.pname+"/"+this.pspec+"/"+this.options.name+"/"+supplierId).then(
              r=>{
                if (r.data == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                  });
                  this.init();
                } else {
                  this.$message({
                    message: '添加失败',
                    type: 'error'
                  });
                }
              }
      )
    },
    newProduct(){
      this.visible = false;
      this.$axios.get("api/newProduct/"+this.input).then(
              r=>{
                if (r.data == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                  });
                  this.openAddProduct();
                } else {
                  this.$message({
                    message: '添加失败',
                    type: 'error'
                  });
                }
              }
              )
    },
  }
}
</script>

<style scoped>

</style>